<html>
<head>
    <script src="../tma.js"></script>
    <script>
        tma.onload = function () {
            // All libraries are loaded asynchronously.
            var screen = new TmaScreen(320, 320);
            screen.attachTo(TmaScreen.BODY);
            screen.afterimage("rgba(0, 0, 0, 0.5)");
            screen.blur(0.5, 0.8, 1.0, 0, 0, false);

            function Particle () { TmaParticle.apply(this, arguments); }
            Particle.prototype = new TmaParticle(null, 0);
            Particle.prototype.constructor = Particle;

            var container = new TmaParticle.Container(Particle);

            var waypoints = [];
            for (var points = 0; points < 8; points++)
                waypoints.push({
                    x: Math.random() * screen.width,
                    y: Math.random() * screen.height,
                    vx: Math.random() * 2 - 1,
                    vy: Math.random() * 2 - 1
                });

            Particle.emit = function () {
                container.add(h);
            };

            Particle.prototype.initialize = function (h) {
                this.x = Math.random() * 16;
                this.y = Math.random() * 16;
                this.ox = this.x;
                this.oy = this.y;
                this.vx = 0;
                this.vy = 0;
                this.h = h;
                this.s = 1 - Math.random() / 4;
                this.v = Math.random() / 2;
                this.target = 0;
                this.screen = screen;
                this.waypoints = waypoints;
            };

            Particle.prototype.update = function () {
                var waypoint = this.waypoints[this.target];
                var dx = this.waypoints[this.target].x - this.x;
                var dy = this.waypoints[this.target].y - this.y;
                if (dx * dx + dy * dy < 1024) {
                    this.target++;
                    if (this.target == this.waypoints.length)
                        return false;
                    this.vx += Math.random() * 2 - 1;
                    this.vy += Math.random() * 2 - 1;
                }
                this.vx += dx / 512;
                this.vy += dy / 512;
                this.vx *= 0.97;
                this.vy *= 0.97;
                this.ox = this.x;
                this.oy = this.y;
                this.x += this.vx;
                this.y += this.vy;
                if (this.x < 0 || this.screen.width <= this.x ||
                        this.y < 0 || this.screen.height <= this.y)
                    return true;
                this.screen.drawLine(
                        ~~this.ox, ~~this.oy, ~~this.x, ~~this.y,
                        ~~this.h, this.s, this.v, 0xff, true, true);
                return true;
            };

            var h = 0;
            function main () {
                var _screen = screen;
                var _waypoints = waypoints;
                for (var i = 0; i < 8; i++)
                    Particle.emit(h);
                h = (h + 1) % 360;
                var length = _waypoints.length;
                for (var way = 0; way < length; way++) {
                    var waypoint = _waypoints[way];
                    waypoint.x += waypoint.vx;
                    waypoint.y += waypoint.vy;
                    if (((waypoint.x > _screen.width) && (waypoint.vx > 0)) ||
                            ((waypoint.x < 0) && (waypoint.vx < 0)))
                        waypoint.vx = -waypoint.vx;
                    if (((waypoint.y > _screen.height) && (waypoint.vy > 0)) ||
                            ((waypoint.y < 0) && (waypoint.vy < 0)))
                        waypoint.vy = -waypoint.vy;
                }
                _screen.lock(TmaScreen.LOCK_WITH_SCREEN);
                container.update();
                _screen.unlock();
            }

            setInterval(main, 20);
        };
    </script>
</head>
<body>
    <img src="data/waypoints.png" style="display: none;">
</body>
</html>
